<template>
  <div>

    <div @click="toSearch">
      <van-search class="ipt" placeholder="请输入搜索关键词" shape="round" />
    </div>

    <div class="contain">
      <ul class="navigation">
        <li
          class="navigation-item"
          v-for="item in res"
          :key="item.id"
          @click="act(item.id)"
          :class="id == item.id? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="contain-r">
        <img class="img" :src="img.banner_url" alt="" />
        <p>{{ img.name }}</p>

       <ul class="contain-r-list">
        <li v-for="item in list" :key="item.id"  class="contain-r-list-item" @click="toGoryList(item.id)">
          <img class="img" :src="item.wap_banner_url" alt="">
          <span>{{ item.name }}</span>
        </li>
        <li class="contain-r-list-item"></li>
        <li class="contain-r-list-item"></li>

       </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { start, currentaction } from "@/api/cartGory";
export default {
  name: "cartGory",
  data() {
    return {
      res: [],
      img: {},
      index: 0,
      id: "",
      list: [],
    };
  },
  watch:{
    id(){
      start().then((res) => {
        console.log(res);
        this.img = res.categoryList.find(el=>el.id==this.id);})

      currentaction({
        id: this.id,
      }).then(res=>{
        console.log(res);
        this.list = res.data.currentOne.subList;
      })
    }
  },
  async mounted() {
    let res = await start();
    console.log(res);
    this.res = res.categoryList;
    this.img = res.categoryList[this.index];
    this.id = res.categoryList[this.index].id;

    let b = await currentaction({
      id: this.id,
    });
    this.list = b.data.currentOne.subList;
  },
  methods: {
    // act(idx) {
    //   this.index = idx - 1;
    //   start().then((res) => {
    //     console.log(res);
    //     this.img = res.categoryList[this.index];
    //     this.id = res.categoryList[this.index].id;
    //     console.log(this.id);
    //   })
    //   setTimeout(() => {
    //   currentaction({
    //     id:this.id
    //   }).then(res=>{
    //     console.log(res);
    //   })
    //   }, 1000);
    // },
    // async act(id) {
    //   this.id = id;
    //   let a = await start();
    //   console.log(a);
    //   this.img = a.categoryList[this.index];
    //   this.id = a.categoryList[this.index].id;

    //   let b = await currentaction({
    //     id: this.id,
    //   });
    //   console.log(b);
    //   this.list = b.data.currentOne.subList;
    //   console.log(this.list);
    // },
    act(id){
      this.id=id
    },
    toSearch() {
      this.$router.push("/home/search");
    },
    toGoryList(id){
      this.$router.push({path:'/cartGory/list',query:{id}});
      
    },
    backTo(){
      this.$router.back()
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>>

